<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/apple-icon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-apps-graph-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="graph-navigation">
                    <form style="width: 100%;" action="/graph">
                        <div class="input-group no-border">
                            <input type="text" name="keyword" class="form-control" placeholder="Search...prefix ">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm my-echarts-header"></div>
        <div class="content my-echarts-container" id="chart_container">
        </div>
    </div>
</div>
<input type="hidden" id="qkw" th:value="${keyword}"/>

<div th:insert="js"></div>
<script src="/js/plugins/echarts.js" type="text/javascript"></script>
<script src="/js/plugins/echarts-gl.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#application_graph_li").addClass("active");

        var myChart = echarts.init(document.getElementById("chart_container"));
        myChart.showLoading();
        $.getJSON("/graph/apps_data?qkw=" + $("#qkw").val(), function (json) {
            myChart.hideLoading();
            myChart.setOption({
                title: {
                    text: "服务拓扑图 (依据最近1小时调用日志生成)"
                },
                animationDurationUpdate: 1500,
                animationEasingUpdate: "quinticInOut",
                series: [
                    {
                        type: "graph",
                        layout: "circular",
                        zoom: 0.7,
                        circular: {
                            rotateLabel: true
                        },
                        data: json.nodes.map(function (node) {
                            return {
                                id: node.id,
                                name: node.label,
                                symbolSize: node.size,
                                label: {
                                    normal: {
                                        show: true
                                    }
                                },
                                itemStyle: {
                                    color: node.color
                                }
                            };
                        }),
                        links: json.edges.map(function (edge) {
                            return {
                                source: edge.sourceID,
                                target: edge.targetID
                            };
                        }),
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        roam: true,
                        label: {
                            position: "right"
                        },
                        focusNodeAdjacency: true,
                        lineStyle: {
                            width: 1,
                            curveness: 0.3,
                            opacity: 0.9
                        }
                    }
                ]
            }, true);
        });
    });

</script>
</body>
</html>